<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!Doctype html>
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>党建</title>
    <meta name="keywords" content="务川,党建"/>
    <meta name="description" content="务川,党建"/>
    <link href="../../static/images/ico/favicon.png" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="../../static/css/article.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.css">

    <script type="text/javascript" src="../../static/js/user/jq181.js"></script>
    <script type="text/javascript" src="../../static/js/user/article.js"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.js"></script>
    <style>
        .myBorder{
            background-color: #fff;
            border: 1px solid #ddd;
            display: block;
            line-height: 1.42857;
            margin-bottom: 20px;
            padding: 4px;
            transition: all 0.2s ease-in-out 0s;
            text-align: center;
            border-radius: 6px;
            font-size: 16px;
        }
        .myBorder button{
            font-size: 18px;
        }
        .titleClass{
            cursor:pointer;
        }
    </style>
    <script>
        var checkLearningContentUrl = "/learning/getContentByCurr.do"
        var startLearningUrl = "/learning/startLearning.do";
        function showLearningContent(currId){
            if(currId != null && !isNaN(currId))
            {
                $.ajax({
                    type: "POST",
                    url: checkLearningContentUrl,
                    data: {currId:currId},
                    success: function (data) {
                        var content = $("#myModal .modal-content tbody");
                        content.html("");
                        var list = data.list;
                        var trs = "";
                        if(list != null && list.length > 0)
                        {
                            for(var i=0; i<list.length;i++)
                            {

                                var ff = "未完成"
                                if(list[i].isFinish =='1')
                                {
                                    ff="完成";
                                }
                                var type = "";
                                //1、职业能力知识；2、培训课件‘3、培训视频；4、示范教学片
                                if(list[i].type =='1')
                                {
                                    type="职业能力知识";
                                }
                                else if(list[i].type =='2')
                                {
                                    type="培训课件";
                                }
                                else if(list[i].type =='3')
                                {
                                    type="培训视频";
                                }
                                else if(list[i].type =='4')
                                {
                                    type="示范教学片";
                                }
                                var oper = "<a role='button' class='bottom btn-primary btn-sm' href='"+startLearningUrl+"?id="+list[i].id+"'>开始学习</a>"
                                trs = trs + "<tr>";
                                trs = trs + "<td>"+list[i].title+"</td>";
                                trs = trs + "<td>"+ff+"</td>";
                                trs = trs + "<td>"+type+"</td>";
                                trs = trs + "<td>"+list[i].realtime+"/"+list[i].time+"</td>";
                                trs = trs + "<td>"+oper+"</td>";
                                trs = trs + "</tr>";
                            }
                            content.html(trs);
                            $("#myModal").modal('show');
                        }
                        else{
                            alert("该课程没有学习的内容");
                        }

                    }
                });
            }
        }
    </script>
</head>
<body>
<jsp:include page="../../themes/header.jsp"/>
<div id="middle">
    <div class="wrapper">
        <div id="middle-content">
            <div class="article-wrapper">
                <div class="article-header">
                    <div>
                        <span></span>当前位置：<a href="/">首页</a> &gt; <a href="/learning/curriculumList.do">学习考试</a> &gt; <a href="/learning/curriculumList.do">学习</a>
                    </div>
                </div>
                <div class="article-content-wrapper" style="padding-top: 10px;">
                    <c:if test="${fn:length(notCurrList)==0 && fn:length(hasCurrList)==0}">
                        <div class="alert alert-success" role="alert"><strong>暂时没有需要学习的课程。</strong></div>
                    </c:if>
                    <c:if test="${fn:length(notCurrList)!=0}">
                        <div class="alert alert-info" role="alert"><strong>未学习完的课程。</strong></div>
                    </c:if>
                    <c:forEach var="item" items="${notCurrList}" varStatus="status">
                        <c:if test="${status.index % 4==0}">
                            <div class="row">
                        </c:if>
                            <div class="col-xs-3">
                                <div class="myBorder">
                                    <p onclick="showLearningContent(${item.id})" class="titleClass bg-info">
                                            ${item.title}
                                    </p>
                                    <p>${item.finishContentNum}/${item.contentNum} 学习内容</p>
                                </div>
                            </div>
                        <c:if test="${(status.index+1) % 4==0 || (fn:length(notCurrList) == (status.index+1))}">
                            </div>
                        </c:if>
                    </c:forEach>
                    <c:if test="${fn:length(hasCurrList)!=0}">
                        <div class="alert alert-success" role="alert"><strong>已学习完的课程。</strong></div>
                    </c:if>
                    <c:forEach var="item" items="${hasCurrList}" varStatus="status">
                        <c:if test="${status.index % 4==0}">
                            <div class="row">
                        </c:if>
                        <div class="col-xs-3">
                            <div class="myBorder">
                                <p onclick="showLearningContent(${item.id})" class="titleClass bg-success">
                                        ${item.title}
                                </p>
                                <p>${item.finishContentNum}/${item.contentNum} 学习内容</p>
                            </div>
                        </div>
                        <c:if test="${(status.index+1) % 4==0 || (fn:length(hasCurrList) == (status.index+1))}">
                        </div>
                        </c:if>
                    </c:forEach>
                    </div>
            </div>
        </div>
    </div>
</div>
<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="margin-top: 150px;">
        <div class="modal-content" style="padding: 5px;">
            <table class="table table-bordered table-striped">
                <thead>
                <tr  class="bg-success">
                    <th>标题</th>
                    <th>学习是否完成</th>
                    <th>内容类型</th>
                    <th>学习时间</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
<c:if test="${empty sessionScope.sysUser}">
    <script type="text/javascript">
        alert("亲爱的用户，请先登录");
        window.location.href="/loginReg/login.do";
    </script>
</c:if>
<jsp:include page="../../themes/footer.jsp"/>
</body>
</html>